<template>
  <div class="invite_box">
    <van-nav-bar :title="title" left-arrow fixed @click-left="onClickLeft" />
    <!-- 轮播图 -->
    <div v-for="item, index in content">
      <img v-if="item.type == 'IMAGE'" style="width: 100%;margin: 0.2rem auto;display: block;" :src="item.content" alt="">
      <video v-if="item.type == 'VIDEO'" controls style="width: 100%;height:auto;" :objectFit="'contain'"
        :autoplay="false">
        <source :src="item.content">
        您的浏览器不支持 Video 标签。
      </video>
      <div class="text" v-if="item.type == 'TEXT'" v-html="item.content.replace(/\n/g, '<br>')"></div>
    </div>

    <!-- 底部 -->
    <!-- <img :src="pics[picIndex]" alt=""> -->
    <!-- <div class="invite_bom">
      <div class="invite_bom_item"  v-if="type==0">
        <div class="pic">
          <img class="pic_one" src="../../images/mine/xiazai.png" alt="" />
          <img class="pic_two" :src="content" alt="" />
        </div>
        <div class="text">长按保存</div>
      </div>
    </div> -->
    <div>

    </div>
  </div>
</template>

<script>
import Swiper from "swiper";
// import 'swiper/css/pagination';
import { INVITE_CONFIG } from "@/api/mine";
import { CONFIG_MATERIAL_INFO } from "@/api/home";
import html2canvas from "html2canvas";
import VueQr from "vue-qr";
import wx from 'weixin-js-sdk';
import { SHARE_JSAPI } from '@/api/cms';
export default {
  name: "HomeView",
  components: { VueQr },
  data() {
    return {
      invite: {},
      background: [],
      codeText: "",
      pics: [],
      picIndex: 0,
      content: '',
      title: '',
      type: 0
    };
  },
  mounted() {
    this.getSourceInfo(this.$route.query.id)
    window.scrollTo(0, 0)
    // 分享配置
    // this.shareAjax();
    // this.inviteConfig();
  },
  methods: {
    getSourceInfo(id) {
      this.$http.get(CONFIG_MATERIAL_INFO + id).then((res) => {
        this.content = res.data.contents
        window.document.title = res.data.info.title;
        this.title = res.data.info.title
      });
    },
    // inviteConfig() {
    //   this.$http.get(INVITE_CONFIG).then((res) => {
    //     this.invite = res.data;
    //     this.background = res.data.background_list;
    //     this.codeText = res.data.invite_url;
    //     this.$nextTick(() => {
    //       setTimeout(() => {
    //         this.createPoster();
    //       }, 100);
    //     });
    //   });
    // },
    shareAjax() { //分享签名
      let params = {};
      params['url'] = encodeURI(location.href.split('#')[0]);

      // console.log('签名URL：' + params['url'])
      this.$http.post(SHARE_JSAPI, params)
        .then(res => {
          this.shareWx(res.data);
          console.log(res.data, '分享数据')
        })
        .catch(() => {
          console.log('分享接口调用失败')
        })
    },
    shareWx(wxInfo) { // 分享配置
      var obj = {
        title: this.title, //标题
        // desc: this.goodInfo.shop_name, //描述
        link: location.href + "&share=1",
        imgUrl: this.content,
      };
      this.wxshareConfig(wxInfo, obj);

      //   console.log(obj, 'jj')
    },
    wxshareConfig(wxInfo, obj) {
      wx.config({
        debug: false,
        appId: wxInfo.app_id, //appId
        timestamp: wxInfo.timestamp, //时间戳
        nonceStr: wxInfo.noncestr, //加密需要字符串(自己定义的)
        signature: wxInfo.signature, //sha1加密后字符串
        jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData']
      });

      console.log(obj, '配置信息')

      wx.error(function (res) {
        console.log('link是: ' + obj.link)
        console.log(res, '分享配置报错')
      })

      wx.ready(function () {

        wx.updateAppMessageShareData({
          title: obj.title, // 分享标题
          // desc: obj.desc, // 分享描述
          link: obj.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: obj.imgUrl, // 分享图标
          success: function () {
            console.log('分享到朋友成功')
          },
          error: function (res) {
            console.log(res, '分享到朋友失败')
          }

        })

        wx.updateTimelineShareData({
          title: obj.title, // 分享标题
          link: obj.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: obj.imgUrl, // 分享图标
          success: function () {
            console.log('分享到朋友圈成功')
          }
        })
      })
    },
    createPoster() {
      const promises = this.background.map((item, index) => {
        const domObj = document.getElementById("posterHtml" + index); // 修改为每个海报的唯一ID
        let vm = this;
        return html2canvas(domObj, {
          useCORS: true,
          allowTaint: false,
          logging: false,
          letterRendering: true,
          onclone(doc) {
            let e = doc.querySelector("#posterHtml" + index);
            e.style.display = "block";
          },
        }).then(function (canvas) {
          vm.pics.push(canvas.toDataURL("image/png"));

          // console.log(canvas.toDataURL("image/png"), 'kk')
          // canvas.toBlob(function(blob) {
          //     // 创建一个链接并触发下载
          //     const link = document.createElement('a');
          //     link.href = URL.createObjectURL(blob);
          //     link.download = 'poster' + index + '.png'; // 设置下载文件名
          //     document.body.appendChild(link);
          //     link.click(); // 触发下载
          //     document.body.removeChild(link); // 移除链接
          // }, 'image/png');
        });
      });

      Promise.all(promises).then(() => {
        // console.log('所有海报已生成并保存到相册');
      });
    },
    async downloadVideo() {
      const videoUrl = 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4';

      // 使用 fetch 获取视频文件
      const response = await fetch(videoUrl);
      const blob = await response.blob(); // 转换为 Blob 对象

      const url = URL.createObjectURL(blob); // 创建 URL 对象
      const link = document.createElement('a');
      link.href = url;
      link.download = this.title; // 设置下载的文件名
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link); // 下载后移除链接
      URL.revokeObjectURL(url); // 释放 URL 对象
    },
    onSwipeChange(e) {
      // console.log(e);
      this.picIndex = e;
    },
    onClickLeft() {
      if (this.$route.query.share) {
        this.$router.replace({
          name: 'home'
        })
      } else {
        this.$router.back();
      }
    },
    // 下载
    downLoadApp() {
      window.open(this.codeText, "_blank");
    },
  },
};
</script>

<style lang="scss" scoped>
.invite_box {
  padding-top: 46px;
  background: #f2f4f5;
  min-height: calc(100vh - 46px);

  // padding-bottom: 1rem;
  ::v-deep .van-nav-bar .van-icon {
    color: #333333;
  }

  ::v-deep .van-nav-bar__arrow {
    font-size: 20px;
  }
}

.my-swipe {
  padding-top: 0.32rem;
  // height: 70vh;
  position: relative;
  overflow: hidden;
  /* 隐藏溢出的部分 */
  padding-bottom: 0.6rem;
}

::v-deep .van-swipe__indicator {
  width: 0.12rem;
  height: 0.12rem;
  background: #ababab;
}
.text{
  width: 95%;
  margin: 0 auto;
  padding-bottom: .2rem;
  font-size: .28rem;
  line-height: .47rem;
  // text-indent: .2rem;
}
.swipe_item_img {
  display: flex;
  width: 90%;
  margin: 0 auto;
  // margin-left: 18%;
  justify-content: center;
  /* 居中对齐图片 */
  position: relative;

  .swipe_bottom {
    width: 37%;
    height: 18%;
    position: absolute;
    top: 58%;
    z-index: 1;
    left: 50%;
    transform: translateX(-50%);
  }

  .swipe_item_text {
    width: 95%;
    position: absolute;
    padding: 0.3rem;
    box-sizing: border-box;
    bottom: 6%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
    border-radius: 10px;
    background-color: #fff;

    .swipe_item_text_top {
      width: 70%;
      color: #333;
      font-size: 0.32rem;
      padding-top: 0.2rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      img {
        border-radius: 50%;
        width: 0.72rem;
        height: 0.72rem;
        vertical-align: middle;
        margin-right: 0.2rem;
      }
    }

    .swipe_item_text_bottom {
      width: 1.2rem;
      height: 1.2rem;
    }
  }
}

.swipe_item_img img {
  width: 100%;
}

.invite_bom {
  width: 100%;
  padding: 0.24rem;
  box-sizing: border-box;
  background: #fff;
  display: flex;
  // justify-content: space-b;
  position: fixed;
  bottom: 0;

  &_item {
    width: 100%;
    text-align: center;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 0.26rem;
    color: #333333;
    line-height: 0.34rem;
    font-style: normal;

    .text {
      // margin-left: 0.72rem;
      margin-top: 0.2rem;
    }

    .pic {
      position: relative;
      height: 0.72rem;

      img {
        // margin: 0 auto;
        width: 0.72rem;
        height: 0.72rem;
        margin-bottom: 0.12rem;
        margin-right: -0.72rem;
      }

      .pic_one {
        position: absolute;
        top: 0;
        left: calc(50% - 0.31rem);
        z-index: 1;
      }

      .pic_two {
        position: absolute;
        top: 0;
        z-index: 99999;
        opacity: 0;
        left: calc(50% - 0.31rem);
      }
    }
  }
}
</style>